<script setup>
import CommonModal from "../modal/CommonModal.vue";
import { ref } from "vue";
import { updateOrderSubStatus } from "@/api/goods";
import { ElMessage } from "element-plus";
import { useOrder } from "@/store/useOrder";

const orderStore = useOrder();

const props = defineProps({
  orderDetails: {
    type: Object,
    required: true,
    default: () => ({}),
  },
  goodsDetails: {
    type: Object,
    required: true,
    default: () => ({}),
  },
});
const demandModalShow = ref(false);
const requirement = ref("");
const loading = ref(false);
const handleConfirm = async () => {
  loading.value = true;
  try {
    await updateOrderSubStatus({
      orderId: props.orderDetails.id,
      stepStatus: 2,
      requirement: requirement.value,
    });
    demandModalShow.value = false;
    orderStore.setReloadOrderDetails(true);
    ElMessage.success("操作成功");
  } catch (error) {
    console.error(error);
  } finally {
    loading.value = false;
  }
};

const wordCount = ref(0);
const handleInput = (e) => {
  if (wordCount.value >= 200) {
    requirement.value = requirement.value.slice(0, 199);
    ElMessage.warning("输入内容不能超过200字");
  }
  wordCount.value = e.target.value.length;
};
</script>

<template>
  <div class="status">
    <img class="icon" src="@/assets/order-time-icon.png" alt="" />
    <div class="info">
      <h3 class="title">请联系 {{ props.orderDetails.nickName }} 确认需求</h3>
      <p class="confirm-list">你可以沟通：</p>
      <p class="confirm-list">①请买家描述期望的交付物和交付时间</p>
      <p class="confirm-list">②确认买家是否有特殊，额外的需求</p>
      <p class="confirm-list">③买家的需求是否需要额外加价处理</p>
      <p class="confirm-list">④服务开启前，需要买家提供的资料与帮助</p>
      <p class="btn">
        <el-button @click="demandModalShow = true" :loading="loading"
          >填写需求共识</el-button
        >
      </p>
    </div>
  </div>
  <CommonModal
    title="需求共识内容"
    v-if="demandModalShow"
    @close="demandModalShow = false"
    @confirm="handleConfirm"
    :loading="loading"
  >
    <template #content>
      <div class="demand-container">
        <textarea
          class="demand"
          v-model="requirement"
          @input="handleInput"
          placeholder="请输入双方的需求沟通结论，确保清晰表达双方诉求与交付预期。"
        ></textarea>
        <span class="word-count">{{ wordCount }}/200</span>
      </div>
    </template>
  </CommonModal>
</template>

<style scoped lang="scss">
.status {
  display: flex;
}
.icon {
  flex: 0 0 24px;
  height: 24px;
  margin-right: 8px;
  position: relative;
  top: 1px;
}
.info {
  flex: 1;
  .title {
    font-size: 20px;
    color: #191e28;
    margin-bottom: 12px;
  }
  .confirm-list {
    color: rgba(25, 30, 40, 0.48);
    line-height: 24px;
  }
  .btn {
    margin-top: 16px;
    button {
      width: 180px;
      height: 48px;
      background: #1dbf73;
      border-radius: 8px 8px 8px 8px;
      border: none;
      font-size: 16px;
      color: #fff;
      cursor: pointer;
    }
  }
}
.demand-container {
  position: relative;
}
.word-count {
  position: absolute;
  right: 10px;
  bottom: 16px;
  font-size: 12px;
  color: rgba(25, 30, 40, 0.48);
}
.demand {
  width: 472px;
  height: 200px;
  margin-top: 10px;
  margin-bottom: 6px;
  border: 1px solid rgba(25, 30, 40, 0.08);
  resize: none;
  border-radius: 6px 6px 6px 6px;
  padding: 8px 12px;
  outline: none;
}
</style>